<template>
  <div class="globalHeader">
    <a-row :wrap="false">
      <a-col flex="180px">
        <div class="title-bar">
          <img class="logo" src="@/assets/logo.png" alt="logo"/>
          <div class="title">月亮湖</div>
        </div>
      </a-col>
      <a-col flex="auto">
        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" @click="doMenuClick" />
      </a-col>
      <a-col flex="80px">
        <div class="user-login-status">
          {{loginUserStore.loginUser}}
<!--          <div v-if="loginUserStore.loginUser.value.id">-->
<!--            {{loginUserStore.loginUser.value.realName ?? '无名'}}-->
<!--          </div>-->
<!--          <div v-else>-->
<!--            <a-button type="primary" :size="size" href="/user/login">登录</a-button>-->
<!--          </div>-->
        </div>
      </a-col>
    </a-row>


  </div>
</template>
<style scoped>
.globalHeader {
  font-size: 28px;
}
.title-bar {
  display: flex;
  align-items: center;
}
.logo {
  width: 60px;
  box-shadow: 2px 4px 3px #b6a5a5;
  border-radius: 40%;
}
.title {
  color: #417bb6;
  font-size: 18px;
  margin-left: 12px;
}
</style>
<script lang="ts" setup>
import { h, ref } from 'vue'
import { HomeOutlined, CrownOutlined, HeartOutlined, SketchOutlined } from '@ant-design/icons-vue'
import type { MenuProps } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const loginUserStore = useLoginUserStore();
console.log(loginUserStore.loginUser)
const router = useRouter();
const doMenuClick = ({key} : {key:string}) => {
  router.push({ path: key })
}

import type { SizeType } from 'ant-design-vue/es/config-provider';
import { useLoginUserStore } from '../stores/useLoginUserStore.ts'
const size = ref<SizeType>('large');

const current = ref<string[]>(['/'])
router.afterEach((to) => {
  current.value = [to.fullPath.split('?')[0]];
})

const items = ref<MenuProps['items']>([
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '主页',
    title: '主页'
  },
  {
    key: '/user/login',
    icon: () => h(SketchOutlined),
    label: '用户登录',
    title: '用户登录'
  },
  {
    key: '/user/register',
    icon: () => h(CrownOutlined),
    label: '用户注册',
    title: '用户注册'
  },
  {
    key: '/admin/userManage',
    icon: () => h(CrownOutlined),
    label: '用户管理',
    title: '用户管理'
  },
  {
    key: '/wallpaper',
    icon: () => h(HeartOutlined),
    // label: h('a', { href: 'https://haowallpaper.com/homeView', target: '_blank' }, '精品壁纸'),
    label: '精品壁纸',
    title: '精品壁纸'
  }
])
</script>
